﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<link href="~/css/site.css" rel="stylesheet" />
<link href="~/layui/css/layui.css" rel="stylesheet" />
<div class="layui-container" style="padding:20px">
    <div class="layui-row">
        <div class="layui-col-md12">
            <h2>客户管理列表</h2>
        </div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md12">
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal" id="Add">
                    <i class="layui-icon layui-icon-add-1"></i> 新增客户
                </button>
                <button class="layui-btn layui-btn-primary" id="refreshList">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>

            </div>
        </div>
    </div>
    
    <div class="layui-row">
        <div class="layui-col-md12">
            <table class="layui-table">
                <thead>
                    <tr>
                        <th>客户Id</th>
                        <th>客户编号</th>
                        <th>客户名称</th>
                        <th>客户类型</th>
                        <th>状态</th>
                        <th>联系人</th>
                        <th>手机号</th>
                        <th>备注</th>
                        <th>操作列</th>
                    </tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
        </div>
    </div>
</div>

<!-- 先引入jQuery，再引入其他脚本 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="~/js/site.js"></script>
<script src="~/layui/layui.js"></script>

<script>
    $(function () {
        // 绑定按钮事件
        $('#Add').click(function(){
            window.location.href = '/Client/Add';
        });
        
        $('#refreshList').click(function(){
            Show();
        });

        // 首次加载
        Show();
    })
    
    //显示
    function Show() {
        $.ajax({
            url: 'http://localhost:5054/api/Client/GetClient',
            dataType: 'json',
            type: 'get',
            contentType: 'application/json',
            cache: false,
            async: true,
            success: function(res) {
                var str = '';
                // 后端API：{ totalCount, totalPCount, data: [...] }
                var rows = (res && res.data) ? res.data : [];

                if (rows.length > 0) {
                    $(rows).each(function (i) {
                        str += `<tr>
                                <td>${i + 1}</td>
                                <td>${this.clientCode || ''}</td>
                                <td>${this.clientName || ''}</td>
                                <td>${this.cTypeName || ''}</td>
                                <td>${(this.clientState === true || this.clientState === 'true') ? '启用' : '禁用'}</td>
                                <td>${this.clientContact || ''}</td>
                                <td>${this.clientTel || ''}</td>
                                <td>${this.clientRemark || ''}</td>
                                <td>
                                    <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" onclick="Del(${this.clientId})">删除</button>
                                    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" onclick="Update(${this.clientId})">修改</button>
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" onclick="Details(${this.clientId})">详情</button>
                                </td>
                            </tr>`;
                    });
                } else {
                    str = '<tr><td colspan="9" style="text-align:center;color:#999;">暂无数据</td></tr>';
                }
                $('#tbody').html(str);
            },
            error: function(xhr, status, error) {
                console.error('加载数据失败:', error);
                $('#tbody').html('<tr><td colspan="9" style="text-align:center;color:#f00;">加载数据失败，请检查网络连接</td></tr>');
            }
        });
    }
 
    //删除
    function Del(clientId) {
        if(confirm("确定删除吗？"))
        {
            $.ajax({
                url: 'http://localhost:5054/api/Client/DelClinent?ClientId=' + clientId,
                dataType:'json',
                type:'get',
                contentType: 'application/json',
                success: res => { 
                    if (res&&(res.code === 200)) {
                        layer.msg("客户删除成功！");
                        Show();
                    }
                    else {
                        layer.msg("客户删除失败！");
                    }
                }
            })
        }
    }

    //修改
    function Update(clientId) {
        localStorage["clientId"] = clientId;
        location.href = '/Client/Update/' + clientId;
    }

    //详情
    function Details(clientId) {
        localStorage["clientId"] = clientId;
        location.href = '/Client/Details/' + clientId;
    }
</script>
